<template>
    <div class="student-detail">
        <el-drawer v-model="isDrawer" size="600" @close="Editclose">
            <template #header>
                学员详情
            </template>
            <div class="content-title">
                学员信息
                <span v-if="!isEdit" @click="toEditPage">编辑</span>
                <template v-else>
                    <span @click="Save">保存</span>
                    <span @click="cancellation">取消</span>
                </template>
            </div>
            <div class="content">
                <div v-if="!isEdit">
                    <el-row>
                        <el-col :span="8">
                            <span class="property">手机:</span>
                            <span class="value">{{ studentInfo.phoneNumber }}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="property">姓名:</span>
                            <span class="value">{{ studentInfo.name || '--' }}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="property">QQ:</span>
                            <span class="value">{{ studentInfo.QQ || '--' }}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <span class="property">微信:</span>
                            <span class="value">{{ studentInfo.wechat || '--' }}</span>
                        </el-col>
                        <el-col :span="9">
                            <span class="property">身份证:</span>
                            <span class="value">{{ studentInfo.card || '--' }}</span>
                        </el-col>
                        <el-col :span="7">
                            <span class="property">年龄:</span>
                            <span class="value">{{ studentInfo.age || '--' }}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <span class="property">性别:</span>
                            <span class="value">{{ studentInfo.sex || '--' }}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="property">地域:</span>
                            <span class="value">{{ studentInfo.location || '--' }}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="property">原学历层次:</span>
                            <span class="value">{{ studentInfo.education || '--' }}</span>
                        </el-col>
                    </el-row>
                </div>
                <el-form v-else class="edit-page" :model="editQuery" :rules="rule" ref="formRef">
                    <el-form-item label="手机号:">
                        <el-input placeholder="请输入手机号" clearable disabled v-model="editQuery.phoneNumber" />
                    </el-form-item>
                    <el-form-item label="姓名:" prop="name">
                        <el-input placeholder="请输入姓名" v-model="editQuery.name" />
                    </el-form-item>
                    <el-form-item label="QQ:">
                        <el-input placeholder="请输入QQ" clearable v-model="editQuery.QQ" />
                    </el-form-item>
                    <el-form-item label="微信:">
                        <el-input placeholder="请输入微信" clearable v-model="editQuery.wechat" />
                    </el-form-item>
                    <el-form-item label="身份证:">
                        <el-input placeholder="请输入身份证" clearable v-model="editQuery.card" />
                    </el-form-item>
                    <el-form-item label="年龄:" prop="age">
                        <el-input placeholder="请输入年龄" clearable v-model.number="editQuery.age" />
                    </el-form-item>
                    <el-form-item label="性别:">
                        <el-radio-group placeholder="请选择性别" v-model="editQuery.sex">
                            <el-radio label="男" />
                            <el-radio label="女" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="地域:">
                        <el-cascader :options="options" clearable v-model="editQuery.location" />
                    </el-form-item>
                    <el-form-item label="原学历层次:">
                        <el-select placeholder="请选择学历" clearable v-model="editQuery.education">
                            <el-option v-for="item in educationOptions" :label="item.label" :value="item.value"
                                :key="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref, defineExpose, defineProps, computed, defineEmits } from 'vue';
import { reviseStudent } from '@/apis/student' // 修改学生信息api
import { pcTextArr } from 'element-china-area-data'
import { quiFn } from '@/hooks/quiFn'
import { ElMessage } from 'element-plus';
const isDrawer = ref(false); // 控制是否打开抽屉
const formRef = ref({}) // form的实例，上面有方法可以对表单数据保存
const isEdit = ref(false)// 是否在编辑页面
const options = pcTextArr

// 父组件传来的学生信息
const props = defineProps(['studentObj'])
const emit = defineEmits(['change'])
const editQueryRew = {
    QQ: '',
    age: '',
    card: '',
    education: '',
    location: '',
    name: '',
    phoneNumber: '',
    sex: '',
    wechat: ''
}

const editQuery = ref(editQueryRew)

// 学历信息
const educationOptions = [
    { value: '无文凭', label: '无文凭' },
    { value: '小学', label: '小学' },
    { value: '初中', label: '初中' },
    { value: '高中/中专', label: '高中/中专' },
    { value: '大专', label: '大专' },
    { value: '本科', label: '本科' },
    { value: '硕士', label: '硕士' },
    { value: '博士', label: '博士' },
]

// 表单校验规则
const rule = ref({
    name: { required: true, message: "姓名是必填项", trigger: 'blur' },
    age: { required: true,message: "年龄必须是数字", trigger: 'blur', type: 'number' }
})


// 动态获取学生信息
const studentInfo = computed(() => props.studentObj)

// 打开抽屉
const open = () => {
    isDrawer.value = true
}

// 关闭抽屉
const close = () => {
    isDrawer.value = false
    isEdit.value = false
}

defineExpose({ // 将方法导出去给父组件使用用于控制抽屉打开和关闭
    open,
    close
})

// 是否开启编辑页面
const toEditPage = () => {
    isEdit.value = true
    initEdit()
}
// 初始化数据
const initEdit = () => {
    const editQueryValue = editQuery.value;
    const studentInfoValue = studentInfo.value
    for (const key in studentInfoValue) {
        editQueryValue[key] = studentInfoValue[key];
    }
}


// 保存学生信息
const Save = () => {
    quiFn({ type: 'success', titleTxt: '保存', contenTxt: '确认信息无误后点击确认按钮' }, () => {
        // 点击确认之后，执行的回调函数,将数据提交到数据库
        formRef.value.validate(async (value) => { // form表单的校验
            if (value) {
                const { data } = await reviseStudent(editQuery.value)
                ElMessage.success(data.txt)
                close()
                isEdit.value = false
                // 告诉父组件重新获取学生数据不然显示的还是旧数据
                emit("change") // 触发事件
            } else {
                isDrawer.value = true
                ElMessage.error('输入格式有问题喔~~~')
            }
        })

    }, () => { // 取消
    })

}

// 取消保存
const cancellation = () => {
    quiFn({}, () => {
        // 点击确认之后，执行的回调函数,可以将数据还原
        isEdit.value = false
    }, () => {
    })


}

// 当编辑的数据并未保存直接退出时，执行
const Editclose = () => {
    if (isEdit.value) {
        quiFn({titleTxt: '是否进行保存', contenTxt: '您的信息还未保存是否进行保存' }, () => {
            // 点击确认之后，执行的回调函数,将数据提交到数据库
            formRef.value.validate(async (value) => { // form表单的校验
                if (value) {
                    const { data } = await reviseStudent(editQuery.value)
                    ElMessage.success(data.txt)
                    close()
                    isEdit.value = false
                    // 告诉父组件重新获取学生数据不然显示的还是旧数据
                    emit("change") // 触发事件
                } else {
                    isDrawer.value = true
                    ElMessage.error('输入格式有问题喔~~~')
                }
            })

        }, () => { // 取消
            emit("change")
            close()
        })
    } else {
        close()
    }
}

</script>


<style lang="scss" scoped>
.content-title {
    font-size: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-left: 30px;

    span {
        color: #5381ba;
        cursor: pointer;
        margin-left: 10px
    }
}

.content {
    margin-top: 10px;
    line-height: 50px;
    font-size: 14px;
    padding-left: 30px;

    .porperty {
        color: #999;
        margin-right: 5px;
    }

    .value {
        color: #666;
    }

    .edit-page {
        margin-top: 10px;

        :deep(.el-row) {
            text-align: right !important;

            .el-from-item_lable {
                width: 70px
            }

            .el_from_item {
                margin-top: 20px;
            }

            .el_ridio {
                margin-right: 5px;
            }

            .el_input {
                width: 150px;
            }
        }
    }
}
</style>